import React, { lazy, Suspense } from 'react';
import HomeLayout from '../layouts/HomeLayout';
import NotFound from '../layouts/NotFound';
import { Navigate } from 'react-router-dom';

const SuspenseComponent = (Component) => (props) => {
  return (
    <Suspense fallback={null}>
      <Component {...props}></Component>
    </Suspense>
  )
}

const Buycar = lazy(() => import("../pages/buycar"));
const Home = lazy(() => import("../pages/home"))
const My = lazy(() => import("../pages/my"))
const Find = lazy(() => import("../pages/find"))
const TryCar = lazy(() => import("../pages/trycar"))
const FindDetail = lazy(() => import("../pages/find/findDetail"))
const HomeDetail = lazy(() => import("../pages/home/detail"))
const Shopcar = lazy(() => import("../components/main/shopcar/Shopcar"))

export default [
  {
    path: "/",
    element: <HomeLayout />,
    children: [
      {
        path: "/",
        element: <Navigate to="/home" />
      },
      {
        path: "/home",
        element: <Suspense fallback={null}><Home></Home></Suspense>,
        children: [
          {
            path: ":id",
            element: <Suspense fallback={null} ><HomeDetail></HomeDetail></Suspense>
          },
          {
            path: 'shopcar',
            element: <Suspense fallback={null} ><Shopcar></Shopcar></Suspense>
          }
        ]
      },
      {
        path: "/buycar",
        element: <Suspense fallback={null}><Buycar></Buycar></Suspense>
      },
      {
        path: "/my",
        element: <Suspense fallback={null}><My></My></Suspense>
      },
      {
        path: "/find",
        element: <Suspense fallback={null}><Find></Find></Suspense>,
        children: [
          {
            path: ":id",
            element: <Suspense fallback={null} ><FindDetail></FindDetail></Suspense>
          }
        ]
      },
      {
        path: "/try",
        element: <Suspense fallback={null}><TryCar></TryCar></Suspense>
      },
      {
        path: "*",
        element: <NotFound />
      }


    ]
  }
];
